```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code Usage Monitor | AI 编码助手用量监控工具</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background: #2d3748;
            border-left: 4px solid #6e8efb;
        }
        .progress-bar {
            height: 8px;
            background: linear-gradient(90deg, #4fd1c5 0%, #4299e1 100%);
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(110,142,251,0.5) 50%, rgba(0,0,0,0) 100%);
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .highlight-text {
            background: linear-gradient(90deg, #a777e3 0%, #6e8efb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <div class="flex items-center mb-4">
                    <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">开源工具</span>
                    <span class="ml-3 text-purple-200">v1.0.0</span>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Claude Code Usage Monitor</h1>
                <p class="text-xl text-purple-100 mb-8">专为 Claude Code 设计的实时 token 监控工具，帮助开发者优化 AI 辅助编码体验</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#features" class="bg-white text-purple-600 px-6 py-3 rounded-full font-medium hover:bg-purple-100 transition duration-300">
                        <i class="fas fa-rocket mr-2"></i>核心功能
                    </a>
                    <a href="https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor" target="_blank" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-purple-600 transition duration-300">
                        <i class="fab fa-github mr-2"></i>GitHub 仓库
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="bg-white rounded-xl shadow-2xl overflow-hidden w-full max-w-md">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1756200831850-bc488def-7e38-4ab2-879a-9b71f5298682.png" alt="Claude Code Usage Monitor 界面截图" class="w-full h-auto">
                </div>
            </div>
        </div>
    </div>

    <!-- Problem Section -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题？</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Claude Code 的 token 限制让开发者难以预测何时会达到限额，传统工具仅提供静态快照，缺乏实时监控和预测</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 text-purple-600">
                        <i class="fas fa-exclamation-triangle text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">突发中断</h3>
                    <p class="text-gray-600">高强度编码期间可能遭遇"session 结束"中断，影响开发流程</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4 text-blue-600">
                        <i class="fas fa-chart-line text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">缺乏可视化</h3>
                    <p class="text-gray-600">传统工具缺乏直观的成本分析和历史趋势视图，预算管理复杂</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4 text-green-600">
                        <i class="fas fa-lightbulb text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">解决方案</h3>
                    <p class="text-gray-600">实时跟踪 token 消耗、预测限额并提供可视化界面，主动管理使用量</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Claude Code Usage Monitor 提供了一系列强大功能来优化您的开发体验</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4 text-purple-600 flex-shrink-0">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">实时监控</h3>
                            <p class="text-gray-600">每 3 秒更新 token 使用情况，显示当前 session 的消耗进度和剩余时间</p>
                        </div>
                    </div>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 text-blue-600 flex-shrink-0">
                            <i class="fas fa-chart-pie"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">预测与警告</h3>
                            <p class="text-gray-600">基于 burn rate 计算 token 耗尽时间，发出多级警告（70%、90%）</p>
                        </div>
                    </div>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 text-green-600 flex-shrink-0">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">多视图分析</h3>
                            <p class="text-gray-600">支持实时、每日和每月视图，展示 token 使用、成本和趋势</p>
                        </div>
                    </div>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-4 text-yellow-600 flex-shrink-0">
                            <i class="fas fa-cog"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">智能计划检测</h3>
                            <p class="text-gray-600">自动识别订阅计划（Pro 44k、Max5 88k、Max20 220k、Custom）</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Claude Code Usage Monitor 在多种开发场景下都能提供价值</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <div class="bg-purple-600 p-6 text-white">
                        <i class="fas fa-user-tie text-3xl mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">独立开发者管理预算</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">一名开发者在 Pro 计划下进行全栈开发，使用 Claude Code 生成代码。监控工具显示 token 消耗接近 70%，发出警告，开发者可暂停高 token 任务（如生成复杂文档），避免限额中断。</p>
                        <div class="mt-4">
                            <span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">思考问题</span>
                            <p class="text-gray-600 mt-2">你的编码工作流中是否需要实时监控来避免 Claude Code 的 token 限额问题？</p>
                        </div>
                    </div>
                </div>
                
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <div class="bg-blue-600 p-6 text-white">
                        <i class="fas fa-users text-3xl mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">团队协作优化</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">一个 DevOps 团队使用 Max20 计划开发微服务。团队运行 <code class="bg-gray-100 px-2 py-1 rounded">claude-monitor --view daily</code>，分析每日 token 使用模式，识别高消耗模型（如 Opus），调整为更经济的 Sonnet，降低成本。</p>
                    </div>
                </div>
                
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <div class="bg-green-600 p-6 text-white">
                        <i class="fas fa-chart-line text-3xl mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">长期项目规划</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">企业开发者运行 <code class="bg-gray-100 px-2 py-1 rounded">claude-monitor --view monthly</code>，查看 30 天 token 趋势和成本，生成报告提交给管理层，用于预算规划和 ROI 分析。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Claude Code Usage Monitor 在 AI 使用监控工具中独具优势</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-6 text-purple-600">优势</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-green-500 mr-3 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">实时预测</h4>
                                <p class="text-gray-600 text-sm">通过 burn rate 和智能预测，优于 ccusage 的静态报告，提供主动管理能力</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-green-500 mr-3 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">美观终端界面</h4>
                                <p class="text-gray-600 text-sm">Rich 库实现的彩色进度条和响应式布局，优于传统 CLI 工具，提升用户体验</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-green-500 mr-3 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">开源与模块化</h4>
                                <p class="text-gray-600 text-sm">基于 MIT 许可，采用单一职责原则（SRP）设计，易于扩展，优于专有工具</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-green-500 mr-3 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">多计划支持</h4>
                                <p class="text-gray-600 text-sm">自动检测 Pro、Max5、Max20 和自定义计划，适配广泛用户</p>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-6 text-red-600">局限性</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-yellow-500 mr-3 mt-1">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">依赖 Claude Code CLI</h4>
                                <p class="text-gray-600 text-sm">需预装 Claude Code CLI 和 Anthropic API 密钥，可能增加成本</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-yellow-500 mr-3 mt-1">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">终端宽度要求</h4>
                                <p class="text-gray-600 text-sm">需要 80+ 字符的终端，窄屏幕可能触发紧凑模式，降低信息密度</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-yellow-500 mr-3 mt-1">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">社区维护</h4>
                                <p class="text-gray-600 text-sm">开源项目有 90+ 开放问题，更新依赖社区，可能延迟新功能开发</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 text-yellow-500 mr-3 mt-1">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">学习曲线</h4>
                                <p class="text-gray-600 text-sm">配置和多视图功能对新手可能复杂，需熟悉 CLI 和 Python 环境</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">快速开始使用 Claude Code Usage Monitor</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <h3 class="text-xl font-semibold mb-6 text-gray-800">1. 安装先决条件</h3>
                    <div class="code-block p-5 rounded-lg mb-6">
                        <pre class="text-gray-100 overflow-x-auto">
<span class="text-green-400"># 安装 Python 3.8+</span>
<span class="text-yellow-200">sudo apt install python3</span> <span class="text-gray-400"># Linux</span>
<span class="text-yellow-200">brew install python3</span> <span class="text-gray-400"># macOS</span>

<span class="text-green-400"># 安装 Git</span>
<span class="text-yellow-200">sudo apt install git</span> <span class="text-gray-400"># Linux</span>
<span class="text-yellow-200">brew install git</span> <span class="text-gray-400"># macOS</span>

<span class="text-green-400"># 安装 Claude Code CLI</span>
<span class="text-gray-400"># 从 Anthropic 官网下载</span>
<span class="text-yellow-200">claude --version</span> <span class="text-gray-400"># 验证安装</span>

<span class="text-green-400"># 安装 uv（推荐）</span>
<span class="text-yellow-200">curl -LsSf https://astral.sh/uv/install.sh | sh</span> <span class="text-gray-400"># Linux/macOS</span>
<span class="text-yellow-200">powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"</span> <span class="text-gray-400"># Windows</span>

<span class="text-green-400"># 配置 Anthropic API 密钥</span>
<span class="text-yellow-200">echo 'ANTHROPIC_API_KEY=your_key_here' >> ~/.claude/config</span></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-semibold mb-6 text-gray-800">2. 安装 Claude Code Usage Monitor</h3>
                    <div class="code-block p-5 rounded-lg mb-6">
                        <pre class="text-gray-100 overflow-x-auto">
<span class="text-green-400"># 通过 PyPI（推荐）</span>
<span class="text-yellow-200">uv tool install claude-monitor</span>
<span class="text-yellow-200">claude-monitor</span> <span class="text-gray-400"># 或 cmonitor、ccmonitor</span>

<span class="text-green-400"># 通过源码</span>
<span class="text-yellow-200">git clone https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor.git</span>
<span class="text-yellow-200">cd Claude-Code-Usage-Monitor</span>
<span class="text-yellow-200">uv tool install .</span>
<span class="text-yellow-200">claude-monitor</span>

<span class="text-green-400"># 通过 pip（不推荐）</span>
<span class="text-yellow-200">pip install claude-monitor</span>
<span class="text-yellow-200">claude-monitor</span>

<span class="text-green-400"># 若命令不可用，添加路径</span>
<span class="text-yellow-200">echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc</span>
<span class="text-yellow-200">source ~/.bashrc</span></pre>
                    </div>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-6 text-gray-800">3. 虚拟环境安装（推荐）</h3>
                    <div class="code-block p-5 rounded-lg mb-6">
                        <pre class="text-gray-100 overflow-x-auto">
<span class="text-yellow-200">git clone https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor.git</span>
<span class="text-yellow-200">cd Claude-Code-Usage-Monitor</span>
<span class="text-yellow-200">python3 -m venv venv</span>
<span class="text-yellow-200">source venv/bin/activate</span> <span class="text-gray-400"># Linux/macOS</span>
<span class="text-yellow-200">venv\Scripts\activate</span> <span class="text-gray-400"># Windows</span>
<span class="text-yellow-200">pip install pytz rich>=13.0.0</span>
<span class="text-yellow-200">python claude_monitor.py</span></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-semibold mb-6 text-gray-800">4. 运行与配置</h3>
                    <div class="code-block p-5 rounded-lg">
                        <pre class="text-gray-100 overflow-x-auto">
<span class="text-green-400"># 基本运行</span>
<span class="text-yellow-200">claude-monitor</span> <span class="text-gray-400"># 默认实时视图</span>

<span class="text-green-400"># 配置计划</span>
<span class="text-yellow-200">claude-monitor --plan max20 --reset-hour 8 --timezone America/New_York</span>

<span class="text-green-400"># 查看每日报告</span>
<span class="text-yellow-200">claude-monitor --view daily</span>

<span class="text-green-400"># 查看每月报告</span>
<span class="text-yellow-200">claude-monitor --view monthly</span></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="hero-gradient py-20 px-6 text-white">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">立即体验 Claude Code Usage Monitor</h2>
            <p class="text-xl text-purple-100 mb-10">优化您的 AI 辅助编码体验，避免意外中断，提升开发效率</p>
            <a href="https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor" target="_blank" class="inline-block bg-white text-purple-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-purple-100 transition duration-300">
                <i class="fab fa-github mr-2"></i>访问 GitHub 仓库
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>
```